const path = require('path'); //导入操作路径的模块
// 导入浏览页面插件--  得到一个构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const htmlplugin = new HtmlWebpackPlugin({
    template: "./src/index.html", //指定要用到的模板文件
    filename: "index.html" //指定生成的文件名称 该文件会在内存中 
        // 目录看不到的
})

module.exports = {
    mode: "development", //mode 用来指定构建模式
    entry: path.join(__dirname, "./src/index.js"), //入口
    output: {
        path: path.join(__dirname, "./dist"), //出口
        filename: "bundle.js"
    },
    plugins: [htmlplugin, new VueLoaderPlugin()], //plugins  数组是webpack 打包期间会用到的
    // 一些插件
    module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }, //处理css文件的规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        esModule: false
                    }
                }]
            },
            // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
            { test: /\.vue$/, loader: 'vue-loader' },
        ]
    }

}